<template>
  <div class="page-Body">
    <h2 class="page-title">订单管理</h2>
    <!-- 表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="订单ID">
        <el-input
          v-model="formInline.orderNum"
          placeholder="请输入订单ID"
          style="width: 250px"
          v-no-space
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <TimeFormatter
          @TimeChild="TimeHandle"
          ref="childComponentRef"
        ></TimeFormatter>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="Search">搜索</el-button>
        <el-button @click="Reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 标签页 -->
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
      <el-tab-pane label="全部订单" name=""></el-tab-pane>
      <el-tab-pane label="待支付" name="0"></el-tab-pane>
      <el-tab-pane label="已支付" name="1"></el-tab-pane>
      <el-tab-pane label="退款中" name="3"></el-tab-pane>
      <el-tab-pane label="已退款" name="4"></el-tab-pane>
      <el-tab-pane label="已取消" name="2"></el-tab-pane>
      <el-tab-pane label="已完成" name="5"></el-tab-pane>
    </el-tabs>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      stripe
      fit
      empty-text="暂无数据"
      show-header
      v-loading="loading"
      size="default"
      element-loading-text="Loading..."
      :header-cell-style="{ background: '#e7e1fb' }"
      style="width: 100%"
      max-height="550px"
    >
      <el-table-column prop="orderId" label="序号" />
      <el-table-column prop="orderNum" label="订单ID" />
      <el-table-column prop="activityName" label="活动名称" />
      <el-table-column prop="payStatus" label="单价">
        <template #default="scope">
          {{
            '￥' +
            scope.row.originalPrice +
            ' ' +
            '(' +
            scope.row.ticketName +
            ')'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户昵称" />
      <el-table-column prop="placeTime" label="创建时间" />
      <el-table-column prop="amount" label="实付金额">
        <template #default="scope">
          <el-button type="primary" text @click="handleClick(scope.row)">
            {{ '￥' + scope.row.amount }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template #default="scope">
          <span
            :style="{
              color: getStatusColor(
                activeName === '5' && scope.row.redeemStatusStr === '已核销'
                  ? scope.row.redeemStatusStr
                  : scope.row.payStatusStr
              ),
            }"
          >
            {{
              activeName === '5' && scope.row.redeemStatusStr === '已核销'
                ? scope.row.redeemStatusStr
                : scope.row.payStatusStr
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="分销商" />
    </el-table>
    <!-- 分页器 -->
    <div class="pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 40, 80, 100]"
        background
        layout="total,sizes, prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹窗 -->
    <el-dialog
      v-model="dialogVisible"
      title="订单详情"
      width="400"
      :before-close="handleClose"
    >
      <el-divider class="custom-divider" />
      <el-descriptions :column="1">
        <el-descriptions-item label="订单ID：">
          <span style="margin-left: 13px">
            {{ DetailsData.orderId }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="活动名称：">
          {{ DetailsData.activityName }}
        </el-descriptions-item>
        <el-descriptions-item label="创建时间：">
          {{ DetailsData.placeTime }}
        </el-descriptions-item>
        <el-descriptions-item label="付款时间：">
          {{ DetailsData.payTime }}
        </el-descriptions-item>
        <el-descriptions-item label="门票类型：">
          {{ DetailsData.ticketName }}
        </el-descriptions-item>
        <el-descriptions-item label="金额：">
          <span style="margin-left: 28px">
            {{ DetailsData.originalPrice }}
          </span>
        </el-descriptions-item>
        <el-descriptions-item label="实付金额：">
          {{ DetailsData.amount }}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式：">
          {{ DetailsData.paymentMethod }}
        </el-descriptions-item>
        <el-descriptions-item label="订单状态：">
          {{ DetailsData.payStatusStr }}
        </el-descriptions-item>
        <el-descriptions-item label="分销商："></el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="OrderManagement">
import { ref, onMounted } from 'vue';
import { getOrderList } from '@/api/Order/order';
import TimeFormatter from '@/components/permission/TimeFormatter.vue';

// 分页变量
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
// 标签页
const activeName = ref('');
// 表单-时间选择器
const childComponentRef = ref(null);
const TimeArray = ref([]);

// 表单数据
const formInline = ref({
  orderNum: '',
});
// 列表数据
const dialogVisible = ref(false);
const tableData = ref([]);
const loading = ref(true);
// 详情
const DetailsData = ref({});
// 点击标签页触发
const handleTabClick = () => {
  console.log(activeName.value);
  OrderList();
};
// 获取列表
const OrderList = async () => {
  loading.value = true;
  const params = {
    current: currentPage.value,
    size: pageSize.value,
    query: { ...formInline.value },
  };
  // 根据标签页状态设置不同的状态参数
  if (activeName.value === '5') {
    params.query.redeemStatus = '1';
  } else {
    params.query.payStatus = activeName.value;
  }

  // 只有当时间数组有值时才添加时间参数
  if (TimeArray.value && TimeArray.value.length > 0) {
    params.startDate = TimeArray.value[0];
    params.endDate = TimeArray.value[1];
  }

  const res = await getOrderList(params);
  if (res.data.code === 200) {
    tableData.value = res.data.data.items || [];
    total.value = res.data.data.counts || 0;
    loading.value = false;
  }
};
// 分页逻辑
const handleSizeChange = async (val) => {
  pageSize.value = val;
  OrderList();
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
  OrderList();
};
// 搜索
const Search = async () => {
  if (TimeArray.value.length === 0 && formInline.value.orderNum === '') {
    // eslint-disable-next-line no-undef
    ElMessage.warning('请至少选择一个搜索条件');
    return;
  }
  OrderList();
};
// 重置
const Reset = () => {
  // 如果当前已经是空值状态，直接返回
  if (TimeArray.value.length === 0 && formInline.value.orderNum === '') {
    return;
  }

  formInline.value = {};
  TimeArray.value = []; // 确保清空时间数组
  if (childComponentRef.value) {
    childComponentRef.value.clear();
  }
  OrderList();
};
// 弹窗
const handleClose = () => {
  dialogVisible.value = false;
};
//详情
const handleClick = (row) => {
  dialogVisible.value = true;
  DetailsData.value = row;
};
//获取时间
const TimeHandle = (data) => {
  TimeArray.value = data;
};
// 获取状态颜色
const getStatusColor = (status) => {
  switch (status) {
    case '已核销':
      return '#00B42A';
    case '待支付':
      return '#FFAE35 ';
    case '已退款':
      return '#FF4E4E';
    default:
      return '#303133';
  }
};
onMounted(() => {
  OrderList();
});
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  color: #9f9fa1;
}

:deep(.el-dialog__body) {
  padding-top: 10px;
  padding-bottom: 10px;
}

:deep(.custom-divider) {
  margin: 0;
  margin-bottom: 20px;
}

:deep(.el-dialog__header) {
  padding-bottom: 10px;
  margin-right: 0;
}
</style>
